<template>
	<view>

		<view class="tab">
			<wuc-tab :tab-list="tabList" textFlex :tabCur.sync="tabCur" tab-class="tabBasic" select-class="tabSelected"></wuc-tab>
			<swiper :current="tabCur" class="swiper" duration="300" :circular="false" indicator-color="rgba(0,0,0,0)"
			 indicator-active-color="rgba(0,0,0,0)" @change="swiperChange" :style="{height:height}">
				<swiper-item v-for="(item,index) in tabList" :key="index">
					<view class="person" v-show="item.name=='个人报表'">
						<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
						 active-color="#1D5CE7" class="setTime"></uni-segmented-control>
						<view class="setTime-custom" v-if="current==4" >
							<text @click="popupStartTime">
								<icon-svg icon-class="riqi" style="margin-right: 10rpx;" />起始：{{startTime}}</text>
							<text style="float: right;" @click="popupEndTime">
								~<icon-svg icon-class="riqi" style="margin-right: 10rpx;" />结束：{{endTime}}</text>
						</view>
						<view class="item">
							<view class="itemLine1">
								个人费用趋势报表
							</view>
							<view class="itemLine2 ">
								<view class="qiun-charts">
									<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
									 :style="{'width':cWidth+'px','height':cHeight+'px'}" />
								</view>
							</view>
							<view class="itemLine3">
								<navigator url="/pages/report/detail">查看详情</navigator>
							</view>
						</view>
						<view class="item">
							<view class="itemLine1">
								经手单据分布报表
							</view>
							<view class="itemLine2 ">
								<view class="qiun-charts">
									<canvas canvas-id="canvasRing1" id="canvasRing1" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
								</view>
							</view>
							<view class="itemLine3">
								查看详情
							</view>
						</view>
						<view class="item">
							<view class="itemLine1">
								个人费用分布报表
							</view>
							<view class="itemLine2 ">
								<view class="qiun-charts">
									<canvas canvas-id="canvasRing2" id="canvasRing2" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
								</view>
							</view>
							<view class="itemLine3">
								查看详情
							</view>
						</view>
					</view>
					<view class="company" v-show="item.name=='企业报表'">
						<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
						 active-color="#1D5CE7"></uni-segmented-control>
						<view class="item">
							<view class="itemLine1">
								提交人分布报表
							</view>
							<view class="itemLine2 ">
								<view class="qiun-charts">
									<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
									 :style="{'width':cWidth+'px','height':cHeight+'px'}" />
								</view>
							</view>
							<view class="itemLine3">
								<navigator url="./detail">查看详情</navigator>
							</view>
						</view>
						<view class="">
							<view class="item" v-for="item in ringCompanyList" :key="item.id">
								<view class="itemLine1">
									{{item.name}}
								</view>
								<view class="itemLine2 ">
									<view class="qiun-charts">
										<canvas :canvas-id="item.id" :id="item.id" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
									</view>
								</view>
								<view class="itemLine3">
									查看详情
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 日期选择控件 -->
		<!-- 遮罩层 -->
		<uni-popup ref="popup" type="bottom">
		    <view class="pickerContainer">
		    	<!-- picker-view组件按钮 -->
		    	<view class="pickerBtn" v-if="showPicker">
		    		<view class="cancle" @click="pickerCancle">取消</view>
		    		<view class="confirm" @click="pickerConfirm">确定</view>
		    	</view>
		    	<picker-view v-if="showPicker" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
		    		<picker-view-column>
		    			<view class="picker-item" v-for="(item,index) in years" :key="index">{{item}}年</view>
		    		</picker-view-column>
		    		<picker-view-column>
		    			<view class="picker-item" v-for="(item,index) in months" :key="index">{{item}}月</view>
		    		</picker-view-column>
		    		<picker-view-column>
		    			<view class="picker-item" v-for="(item,index) in days" :key="index">{{item}}日</view>
		    		</picker-view-column>
		    	</picker-view>
		    </view>
		</uni-popup>
		
		<zNavigatorBar></zNavigatorBar>
	</view>
</template>

<script>
	import zNavigatorBar from '@/pages/common/navigation';
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	var canvasRing1 = null;
	var canvasRing2 = null;
	var canvasRingCompany1 = null
	var canvasRingCompany2 = null;
	var canvasRingCompany3 = null;
	var canvasRingCompany4 = null;
	var canvasRingPerson = [canvasRing1, canvasRing2]
	var canvasRingCompany = [canvasRingCompany1, canvasRingCompany2, canvasRingCompany3, canvasRingCompany4]
	const date = new Date()
	const years = []
	const year = date.getFullYear()
	const months = []
	const month = date.getMonth() + 1
	const days = []
	const day = date.getDate()
	for (let i = 1990; i <= date.getFullYear(); i++) {
		years.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		days.push(i)
	}


	export default {
		onReady() {
			// this.show()
		},
		onShow() {
			this.show()
		},
		data() {
			return {
				tabCur: 0,
				tabList: [{
					name: '个人报表'
				}, {
					name: '企业报表'
				}],
				items: ['本月', '本季', '本年', '去年', '自定义'],
				current: 0,
				columnData: {
					"categories": ["20-12"],
					"series": [{
						"name": "审批中+支付中",
						"data": [703],
						"color": "#77D0A4"
					}, {
						"name": "已完成",
						"data": [0],
						"color": "#7EC1F2"

					}]
				},
				columnDataSeason: {
					"categories": ["20-10", "20-11", "20-12"],
					"series": [{
						"name": "审批中+支付中",
						"data": [0, 0, 703],
						"color": "#77D0A4"
					}, {
						"name": "已完成",
						"data": [0, 0, 0],
						"color": "#7EC1F2"

					}]
				},
				ringCompanyList: [{
					id: 'canvasRingCompany1',
					name: '提交人分布报表'
				}, {
					id: 'canvasRingCompany2',
					name: '费用承担部门分布报表'
				}, {
					id: 'canvasRingCompany3',
					name: '费用类型分布报表'
				}, {
					id: 'canvasRingCompany4',
					name: '项目分布报表'
				}],
				ringData: {
					"series": [{
						"data": 0.00,
						"name": '金额',
						"color": 'gray'
					}]
				},
				ringDataCompany: {
					"series": [{
						"data": 703,
						"name": '金额',
						"color": '#77D0A4'
					}]
				},
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				height: '2200rpx',
				startTime: '请选择',
				endTime: '请选择',
				title: 'picker-view',
				// 时间选择器变量
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				showPicker: 'true',
				startOrEnd:0
			}
		},
		methods: {
			pickerCancle(){
				this.$refs.popup.close();
				
			},
			pickerConfirm(){
				if(this.startOrEnd==0){
					this.startTime=`${this.year}-${this.month}-${this.day}`
				}else{
					this.endTime=`${this.year}-${this.month}-${this.day}`
				}
				
				this.$refs.popup.close()
			},
			popupStartTime(){
				this.startOrEnd=0
				this.$refs.popup.open()
			},
			popupEndTime(){
				this.startOrEnd=1
				this.$refs.popup.open()
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			show() {
				_self = this;
				this.cWidth = uni.upx2px(600);
				this.cHeight = uni.upx2px(400);
				this.showColumn("canvasColumn", this.columnData);
				for (let i = 0; i < this.ringCompanyList.length; i++) {
					this.showRing(`canvasRing${i+1}`, this.ringData, canvasRingPerson[i])
					this.showRing(`canvasRingCompany${i+1}`, this.ringDataCompany, canvasRingCompany[i]);
				}
			},
			tabChange(index) {
				this.tabCur = index;
			},
			swiperChange(e) {
				let {
					current
				} = e.target;
				this.tabCur = current;
				current == 0 ? this.height = '2200rpx' : this.height = '3500rpx'
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (this.current <= 1) {
					this.show()
				}
			},
			showColumn(canvasId, chartData) {

				if (this.current == 1) {
					chartData = this.columnDataSeason;
				}
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					padding: [15, 0, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel:false,
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						data: [{
							position: 'right',
							axisLine: false,
							format: (val) => {
								return val.toFixed(0)
							},
						}]
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.1 / chartData.categories.length
						}
					}
				});
			},
			showRing(canvasId, chartData, canvaRing) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					padding: [5, 5, 5, 5],
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: false,
					title: {
						name: `¥${chartData.series[0].data}.00`,
						color: 'black',
						fontSize: 20,
					},
					subtitle: {
						name: '费用总额',
						fontSize: 15,
						color: '#999'
					},
					extra: {
						pie: {
							ringWidth: 10 * _self.pixelRatio,
						}
					},
				});
			},
		},


		components: {
			zNavigatorBar,
			WucTab
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		width: 100%;
	}

	.setTime-custom {
		padding: 20rpx 10rpx 20rpx 10rpx;
		margin: 10rpx;
		background-color: white;
		border-radius: 10rpx;
		color: #373938;
	}

	.segmentControler {
		width: 50rpx;
	}

	.person {
		padding: 25rpx;
	}

	.company {
		padding: 25rpx;
	}

	.content {
		margin-top: 40rpx;
		background-color: white;
	}

	.qiun-charts {
		width: 600upx;
		height: 400upx;
		background-color: #FFFFFF;
		margin: 0 auto;
	}

	.charts {
		width: 600upx;
		height: 400upx;
		background-color: #FFFFFF;
	}

	.item {
		margin-top: 30rpx;
		border-radius: 30rpx;
		background-color: white;
	}

	.itemLine1 {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.itemLine2 {
		margin-top: 30rpx;
	}

	.itemLine3 {
		margin-top: 30rpx;
		text-align: center;
		color: $themeColor;
		font-size: 35rpx;
		border-top: 0.5rpx solid $uni-text-color-grey;
		height: 60rpx;
		line-height: 60rpx;
	}

	// .tabBasic{
	// 	color: $uni-text-color-grey;
	// 	font-size: 30rpx;
	// }

	// .tabSelected{
	// 	color: red;
	// }
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.picker-item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		margin-top: 0%;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: rgba(0, 0, 0, 0.5);
	}
	.pickerBtn {
		width: 100%; 
		height: 101rpx;
		line-height: 101rpx;
		background-color: #fff;
		font-size: 40rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #ADB0A7;

		.cancle {
			color: #0076FF;
			padding-left: 40rpx;
			box-sizing: border-box;
		}

		.confirm {
			color: #FE4533;
			padding-right: 40rpx;
			box-sizing: border-box;
		}
	}
		
	.pickerContainer{
		background-color: white;
	}

</style>
